<template>
    <div class="order">
        <div class="content">
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单列表</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 表格 -->
            <div class="table">
                <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%" border stripe>
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column property="order_number" label="订单编号" width="295"></el-table-column>
                <el-table-column property="order_price" label="订单价格" width="100"></el-table-column>
                <el-table-column property="pay_status" label="是否付款" width="120">
                    <template slot-scope="scope">
                        <div v-if="scope.row.pay_status==0">
                            <el-button type="danger" size="small">未付款</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="is_send" label="是否发货"></el-table-column>
                <el-table-column property="update_time" label="下单时间">
                  <template slot-scope="scope">
                    <div>{{scope.row.create_time | time1}}</div>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            </div>

            <!-- 分页 -->
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { orders } from "../api/api.js";
export default {
  data() {
    return {
        tableData:[],
        currentRow: null,
        total:0,
        currentPage4:0
    };
  },
  created() {
    this.orders();
  },
   methods:{
     setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4=val;
      },
      orders(){
        orders({
          pagenum:1,
          pagesize:10
        }).then(res=>{
          if(res.data.meta.status==200){
             console.log("用户",res);
             this.total=res.data.data.total,
             this.tableData=res.data.data.goods;
             
          }
        })
      },
  },
  filters: {
    time1: function(val) {
      var now = new Date(val);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var data = now.getDate();
      return (
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (data < 10 ? "0" + data : data)
      );
    }
  },
};
</script>

<style scoped lang="scss">
    .order{
        width:85%;
        height:93%;
        background-color:white;
        margin:22px auto;
        display:flex;
        justify-content: center;
        align-items:center;
        .content{
            width:97%;
            height:95%;
            display:flex;
            flex-direction: column;
            .table{
                width:97%;
                height:82%;
                margin-top:18px;
                overflow: auto;
            }
            .block{
                margin-top:12px;
            }
        }
    }
</style>
